carousel('carouselUl', '#carouselUl li', 'turnCircleUl', 'turnToLBtn', 'turnToRBtn')
function carousel(imgUl, imgLi, dotContain, leftBtn, rightBtn) {
  var eleInners = document.getElementById(imgUl),//列表容器ul
    liImgs = eleInners.querySelectorAll(imgLi),//所有图片的li
    eleDots = document.getElementById(dotContain),//切换点容器
    liDots = eleDots.children,//所有切换点
    elePrev = document.getElementById(leftBtn),//左移上一张
    eleNext = document.getElementById(rightBtn),//右移下一张
    // LI_WIDTH = liImgs[0].offsetWidth,//图片宽度
    LI_WIDTH = liImgs[0].children[0].children[0].offsetWidth,//图片宽度
    TIME_DURATION = 3000,//持续时间
    interval = null,//定时器
    index = 1,
    circle = 0;
  //首先是克隆第一张后最后一张图片
  var endImg = liImgs[liImgs.length - 1].cloneNode(true);
  // var endImg = liImgs[liImgs.length - 1].children[0].children[0];
  var startImg = liImgs[0].cloneNode(true);
  eleInners.style.width = eleInners.children.length * 100 + 100 + '%'; //动态改变列表容器的宽度适应任意图片数
  eleInners.appendChild(startImg)
  eleInners.insertBefore(endImg, eleInners.children[0])
  //生成小点点
  for (var i = 0, len = eleInners.children.length - 2; i < len; i++) {
    var li = document.createElement('li');
    li.index = i
    eleDots.appendChild(li)
  }
  //第一个点高亮
  liDots[0].className = 'cur'
  //接着是动画，用差值和offsetLeft值和移动的值，给一个speed让它移动
  //图片列表容器位置eleInners 要移动到的位置targetPlace 
  function animate(obj, targetPlace) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      //判断移动的位置是向左移动还是向右移动
      var speed = obj.offsetLeft > targetPlace ? -15 : 15;
      var result = targetPlace - obj.offsetLeft;
      //只要移动的差值大于speed，那么就一直让obj.style.left 改变
      if (Math.abs(result) > Math.abs(speed)) {
        obj.style.left = obj.offsetLeft + speed + 'px'
      } else {
        //否则如果已经移动的，obj.offsetleft与要移动的位置十分接近了，则移动到目标位置并关闭定时器结束轮播
        obj.style.left = targetPlace + 'px';
        clearInterval(obj.timer);
      }
    }, 10)
  }

  //自动轮播
  interval = setInterval(autoplay, 3000)

  //向左的autoplay
  function autoplay() {
    index++;
    if (index > eleInners.children.length - 2) {
      eleInners.style.left = 0;//赶快跳回去
      index = 1;//找到第二张图片
    }
    animate(eleInners, -index * LI_WIDTH);
    circle++;
    if (circle >= eleInners.children.length - 2) {
      circle = 0;//circle回到第一个点
    }
    for (var i = 0, len = liDots.length; i < len; i++) {
      liDots[i].className = '';

    }
    liDots[circle].className = 'cur'
  }
  //向右移动
  function moveright() {
    index--;
    if (index < 0) {
      eleInners.style.left = -(eleInners.children.length - 2) * LI_WIDTH + 'px';
      index = eleInners.children.length - 3;//找到倒数第二张图片
    }
    animate(eleInners, -index * LI_WIDTH);
    circle--;
    if (circle < 0) {
      circle = eleInners.children.length - 3;//circle回到最后一个点
    }
    for (var i = 0, len = liDots.length; i < len; i++) {
      liDots[i].className = '';
    }
    liDots[circle].className = 'cur'
  }
  //点击dots
  for (let i = 0; i < liDots.length; i++) {
    liDots[i].addEventListener('click', function (event) {
      var target = event.target;
      index = target.index + 1;
      circle = index - 1;
      for (var i = 0, len = liDots.length; i < len; i++) {
        liDots[i].className = '';
      }
      liDots[circle].className = 'cur'
      animate(eleInners, - index * LI_WIDTH);
    })
  }
  //上一张按钮
  elePrev.addEventListener('click', function (event) {
    moveright();
  })
  //下一张按钮
  eleNext.addEventListener('click', function (event) {
    autoplay();
  })

  //鼠标移入容器，清除定时器
  eleInners.parentElement.addEventListener('mouseover', function (event) {
    clearInterval(interval)
  }, true);
  //鼠标移出，开启定时器
  eleInners.parentElement.addEventListener('mouseout', function (event) {
    interval = setInterval(autoplay, 3000)
  }, true);
}
